<template>
	<view class="_tbody">
		<!-- #ifdef H5 -->
		<view class="tou">
			<u-icon name="arrow-left" size="50" @click='onfanhui'></u-icon>
		</view>
		<!-- #endif -->
		<view class="healt_top">
			<view class="healt_top_title">健康体重范围</view>
			<view class="healt_top_content">
				体重是客观评价人体营养和健康状况的重要指标，
				以下计算适用于我国成年人: 19岁 ~69岁<br>
				不适用人群:运动员、怀孕或哺乳期、重量训练者......
			</view>
		</view>
		<view class="healt_bottom">
			<view class="healt_bottom_t">请输入您的性别、身高:</view>
			<view class="checkbox">
				<view class="gender">性别:</view>
				<u-radio-group v-model="valuegender" size="20px" @change="changeGender">
					<u-radio shape="circle" labelSize="18px" label="男" name="男"></u-radio>
					<u-radio shape="circle" labelSize="18px" label="女" name="女"></u-radio>
				</u-radio-group>
			</view>
			<view class="input_wight">
				<view class="input_wight_height">
					身高
				</view>
				<u--input placeholder="请输入您的身高" border="surround" v-model="valInput" @change="changeinput"></u--input>
			</view>
			<u-button type="primary" color='linear-gradient( 120deg ,#00cccc,#33cc66 )' text="计算" @click="Oncount">
			</u-button>

			<view class="hea_count" v-show="show">
				<view class="count_jieguo ">计算结果为：</view>
				<view class="count_fanwei_flex">
					<view class="count_fanwei">您的健康体重范围为：</view>
					<view class="count_fanwei_color">
						{{count}}
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 选框值
				valuegender: '男',
				// 绑定输入的值
				valInput: '',
				// 预估的范围
				count: '',
				val: '男',
				height: '',
				show: false

			};
		},
		methods: {
			onfanhui() {
				uni.navigateBack()
			},
			// 更改选项后 判断男女 在根据输入的值 进行区间预估
			changeGender(a) {
				// console.log('改变了选项');
				// console.log(a);
				this.val = a
				console.log(this.val);
			},
			changeinput(e) {
				// 拿到 输入的值 
				// 根据输入的值 判断 区间 
				console.log('change', e);
				this.height = e
				if (this.height == '') {
					this.show = false
				}
			},
			Oncount() {
				this.show = true
				if (this.val == '男' || this.height !== '') {
					let weight1 = 0
					let weight2 = 0
					weight1 = (this.height - 110) * (1 - 0.15);
					weight2 = (this.height - 110) * (1 + 0.25);
					this.count = `${weight1.toFixed(2)} kg ~ ${weight2.toFixed(2)} kg`
				} else if (this.val == '女' || this.height !== '') {
					let weight3 = 0
					let weight4 = 0
					weight3 = (this.height - 100) * (1 - 0.15);
					weight4 = (this.height - 100) * (1 + 0.20);
					this.count = `${weight3.toFixed(2)} kg ~ ${weight4.toFixed(2)} kg`
				}

			}
		}
	}
</script>

<style lang="scss">
	// ._tbody {
	// 	width: 100%;
	// 	height: 100%;
	// 	// background-color: #818181 !important;
	// }
	._tbody {
		background-color: #efefef;
	}

	.tou {
		width: 100%;
		height: 50px;
		background-color: white;
		display: flex;
	}

	.u-radio {
		margin-right: 25px;
	}

	.healt_top {
		height: 170px;
		background-color: #fff;
		padding: 20px 10px;
		margin-bottom: 20px;
	}

	// .healt_top_title {}

	.healt_top_content {
		text-indent: 2em;
		font-size: 14px;
		color: #a1a1a1;
		line-height: 30px;
		height: 30px;
		margin-top: 20px;
	}

	// .background-color: {}

	.healt_bottom {
		height: 190px;
		background-color: #fff;
	}

	.healt_bottom_t {
		padding: 20px 10px;
	}

	.checkbox {
		display: flex;
		// justify-content: space-between;
	}

	.gender {
		margin: 10px 20px;
	}

	.input_wight {
		display: flex;
	}

	.input_wight_height {
		margin: 10px 20px;
	}

	.hea_count {
		margin-top: 20px;
		height: 100px;
		background-color: #fff;
	}

	.count_jieguo {
		padding: 10px;
	}

	.count_fanwei {
		padding: 10px;
		// font-size: 14px;

	}

	.count_fanwei_flex {
		display: flex;
		// justify-content: ;
	}

	.count_fanwei_color {
		padding: 10px;
		color: #33cc66;
	}
</style>
